import { useEffect, useState, } from 'react';
import { Card, Form, Input, Button, Table, Select } from 'antd';
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import './index.less';
import { ColumnsType } from 'antd/lib/table';
import { reqUpStatus, reqGetHospitalList, reqGetCityList } from '@api/hospital/hospitalList';
import { HospitalListType, HospitalItem, CityList, SearchParams } from '@api/hospital/model/hospitalListtypes';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate } from 'react-router-dom';


const { Option } = Select


export default function HospitalList() {
    const [hospitalList, sethospitalList] = useState<HospitalListType>([])
    const [loading, setloading] = useState(false);
    const [total, settotal] = useState(0);
    const [pageSize, setpageSize] = useState(5);
    const [current, setcurrent] = useState(1);
    const [provinceList, setprovinceList] = useState<CityList>([]);
    const [cityList, setcityList] = useState<CityList>([]);
    const [districtList, setdistrictList] = useState<CityList>([]);
    const [hospitalType, sethospitalType] = useState<CityList>([]);
    const [values, setvalues] = useState<SearchParams>({})
    const getHospitalList = async (current: number, pageSize: number, values?: SearchParams) => {
        setloading(true)
        const res = await reqGetHospitalList({
            page: current,
            limit: pageSize,
            ...values
        })
        setcurrent(current)
        setpageSize(pageSize)
        settotal(res.totalElements)
        sethospitalList(res.content)
        setloading(false)
    }
    const getProvince = async () => {
        const provinceList = await reqGetCityList(86)
        setprovinceList(provinceList)
    }
    const getCity = async (id: number) => {
        const cityList = await reqGetCityList(id)
        setcityList(cityList)
    }
    const getDistrict = async (id: number) => {
        const districtList = await reqGetCityList(id)
        setdistrictList(districtList)
    }
    const getHospitalType = async () => {
        const hospitalType = await reqGetCityList(10000)
        sethospitalType(hospitalType)
    }
    useEffect(() => {
        getHospitalList(current, pageSize)
        getProvince()
        getHospitalType()
    }, [])

    const handleChange = (value: number) => {
        getCity(value)
        setdistrictList([])
        form.resetFields(["cityCode", "districtCode",])
    };
    const cityChange = (value: number) => {
        getDistrict(value)
        form.resetFields(["districtCode",])
    };

    const onFinish = (values: SearchParams) => {
        //const { hosname = "", hoscode = "", hostype = "", provinceCode = "", cityCode = "", districtCode = "", status = "" } = values;
        setvalues(values)
        getHospitalList(1, 5, values)
    }
    const reset = () => {
        setvalues({})
        setpageSize(5)
        setcurrent(1)
        getHospitalList(1, 5)
        form.resetFields()
    }
    const navigata = useNavigate()

    const showHospital = (id: string) => {
        return () => {
            navigata(`/syt/hospital/hospitalList/show/${id}`)
        }
    }
    const HospitalSchedule = (hoscode: string) => {
        return () => {
            navigata(`/syt/hospital/hospitalList/schedule/${hoscode}`)
        }
    }
    const columns: ColumnsType<HospitalItem> = [
        {
            title: '序号',
            render: (row, records, index) => index + 1,
            align: 'center',
            width: 70,
        },
        {
            title: '医院logo',
            render: (row) => <img style={{ width: 100, height: 100 }} src={`data:image/jpeg;base64,${row.logoData}`} alt={row.hosname} />,
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',

        },
        {
            title: '等级',
            dataIndex: 'param',
            render: param => param.hostypeString
        },
        {
            title: '详细地址',
            dataIndex: 'param',
            render: param => param.fullAddress
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: status => status === 0 ? "未上线" : "已上线"
        },
        {
            title: '创建时间',
            dataIndex: 'createTime'
        },
        {
            title: '操作',
            width: 250,
            render: (row) => {
                return (
                    <>
                        <Button type='primary' onClick={showHospital(row.id)}>查看</Button>
                        <Button type='primary' className='ml' onClick={HospitalSchedule(row.hoscode)}>排班</Button>
                        <Button type='primary' className='ml' onClick={upStatus(row.id, row.status)}>{row.status === 0 ? "上线" : "下线"}</Button>
                    </>
                )
            }
        },
    ]
    const upStatus = (id: string, status:number) => {
        return async () => {
            await reqUpStatus(id, status===0 ? 1 : 0 )
            getHospitalList(current, pageSize, values)
        }
    }
    const [form] = Form.useForm()
    return <Card>
        <Form layout="inline" form={form} onFinish={onFinish}>
            <Form.Item name="provinceCode">
                <Select className='mb' style={{ width: 200 }} onChange={handleChange} placeholder='请选择省'>
                    {
                        provinceList.map((provinceItem) => {
                            return <Option key={provinceItem.id} value={provinceItem.value}>{provinceItem.name}</Option>
                        }
                        )
                    }
                </Select>
            </Form.Item>

            <Form.Item name="cityCode">
                <Select style={{ width: 200 }} onChange={cityChange} placeholder='请选择市'>
                    {
                        cityList.map((cityItem) => {
                            return <Option key={cityItem.id} value={cityItem.value}>{cityItem.name}</Option>
                        }
                        )
                    }
                </Select>
            </Form.Item>

            <Form.Item name="districtCode">
                <Select style={{ width: 200 }} placeholder='请选择区'>
                    {
                        districtList.map((districtItem) => {
                            return <Option key={districtItem.id} value={districtItem.value}>{districtItem.name}</Option>
                        }
                        )
                    }
                </Select>
            </Form.Item>

            <Form.Item name="hosname">
                <Input placeholder="医院名称" />
            </Form.Item>

            <Form.Item name="hoscode">
                <Input placeholder="医院编号" />
            </Form.Item>

            <Form.Item name="hostype">
                <Select style={{ width: 200 }} placeholder='医院类型'>
                    {
                        hospitalType.map((typeItem) => {
                            return <Option key={typeItem.id} value={typeItem.value}>{typeItem.name}</Option>
                        }
                        )
                    }
                </Select>
            </Form.Item>

            <Form.Item name="status">
                <Select style={{ width: 200 }} onChange={handleChange} placeholder='医院状态'>
                    <Option value="1">未上线</Option>
                    <Option value="2">已上线</Option>
                </Select>
            </Form.Item>

            <Form.Item name="" style={{ marginBottom: 20 }}>
                <Button type='primary' icon={<SearchOutlined />} htmlType='submit'>查询</Button>
                <Button className='ml' onClick={reset}>清空</Button>
            </Form.Item>
        </Form>
        <Table
            columns={columns}
            dataSource={hospitalList}
            bordered
            loading={loading}
            rowKey='id'
            pagination={{
                current,
                pageSize,
                total,
                pageSizeOptions: [5, 10, 15, 20],
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (a) => `总共：${a}`,
                onChange: (current, pageSize) => {
                    getHospitalList(current, pageSize, values)

                }
            }}
        />
    </Card>;
}